<template>
	<div>
	<div class='seach'>
		<input class='search-input' type='text' placeholder="请输入城市名或拼音" v-model='keyWord'>
	</div>
	<div class='seach-content' ref='wapper' v-show='keyWord'>
		<ul>
			<li v-for='item of list' class='border-bottom city-content' :key='item.id' v-on:click='handleClick(item.name)'>{{item.name}}</li>
			<li class='border-bottom city-content' v-show='flag1'>没有找到匹配数据</li>
		</ul>
	</div>
   </div>
</template>
<script>
import BScroll from 'better-scroll'
import {mapMutations} from 'vuex'
	export default{
		name:'CitySeach',
		props:{
			cities:Object
		},
		data:function(){
			return {
				keyWord:'',
				//保存结果
				list:[],
				timer:null,
			}
		},
		computed:{
			flag1:function(){
				return !this.list.length;
			}
		},
		methods:{
			handleClick:function(city){
				 this.changeCity(city);
				 this.$router.push('/');
			},
			...mapMutations(['changeCity'])
		},
		mounted:function(){
			this.scroll=new BScroll(this.$refs.wapper);
		},
		watch:{
			keyWord:function(){
				this.list=[];
				if(this.timer){
					clearTimeout(this.timer)
				};
				this.timer=setTimeout(()=>{for(var i in this.cities){
				if(this.keyWord){
			  	for(var item of this.cities[i]){
			    if(item.spell.indexOf(this.keyWord)>-1||item.name.indexOf(this.keyWord)>-1){
			    	this.list.push(item);
			    }}
			  }}
		   },100);
			}
		}

	}
</script>
<style lang='stylus' scoped>
@import '~styles/varibles.styl'
.seach
	background:$bgColor
	height:0.72rem
	padding-left:0.1rem
	padding-right:0.1rem
	.search-input
		width:100%
		height:0.62rem
		line-height:0.62rem
		text-align:center
		box-sizing:border-box
		border-radius:0.06rem
		color:#666
		padding:0.1rem
.seach-content
	z-index:1
	position:absolute
	overflow:hidden
	top:1.58rem
	left:0 
	right:0
	bottom:0
	background:#fff
	.border-bottom
		&:before
			border-color:#ccc
		&:after
			border-color:#ccc
	.city-content
		line-height:0.56rem
		padding-left:0.2rem
		color:#666
</style>